import VueRouter from 'vue-router'
import Vue from 'vue'

import Layout from '@/views/layout'
import Login from '@/views/login'
import Dashboard from '@/views/dashboard'
import Article from '@/views/article'
import store from '@/store'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
       // 一级路由
    {
      path:'/',
      redirect:'/article',  //进入跟页面的时候，直接跳转到article页面
      component:Layout,
      // 二级路由
      children:[
        {
          path:'/dashboard',
          component:Dashboard
        },
        {
          path:'/article',
          component:Article
        }
      ]
    },
    {
      path:'/login',
      component:Login
    }
  ]
})
// 增加路由导航守卫 -> 只要是路由跳转之前，都会执行这个函数
// 理解的点：
// 1. beforeEach为什么叫做导航守卫->所有路由的跳转都必须经过beforeEach函数处理
// 2. to:路由跳转的目标地址  ，from：路由跳转的来源地址 ，next是一个方法，next()表示释放当前的目标地址的访问权
// next() 不会触发beforeEach
// next('跳转的路径') -> 相当于 this.$router.push()  表示跳转到想去的目标路径，这里就会主动触发一次beforeEach
router.beforeEach((to, form, next) => {
  // 需求：如果访问的是登录页面，直接放行放行，否则，当token为空的时候跳转到登录页面
  // console.log('路由导航守卫', next)
  let token = store.state.user.token
  console.log('token:',token);
  
  if (to.path === '/login') {
    // 释放当前想去的地方-> 这里直接将login组件渲染出来
    next()
  } else {
    // 判断如果token为空，则跳转到登录页，否则直接放行
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})

export default router
